From 0b57b888caf8817ff4992c59ed40ed29bee34fd4 Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Thu, 12 Sep 2024 14:06:44 +0000
Subject: Add PostPagination component for blog post navigation
---
src/pages/blog/[...slug].astro | 17 ++++++++++++++---
1 file changed, 14 insertions(+), 3 deletions(-)
(limited to 'src/pages/blog/[...slug].astro')
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 4ecb1e1..9262a66 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -2,17 +2,24 @@
import { type CollectionEntry, getCollection } from "astro:content";
import Comments from "../../components/Comments.astro";
import Layout from "../../layouts/PageLayout.astro";
+import Pagination from "../../components/PostPagination.astro";
export async function getStaticPaths() {
const posts = await getCollection("blog");
- return posts.map((post) => ({
+ const total = posts.length;
+
+ return posts.map((post, index) => ({
params: { slug: post.slug },
- props: post,
+ props: {
+ post,
+ prevPost: index + 1 === total ? null : posts[index + 1],
+ nextPost: index === 0 ? null : posts[index - 1],
+ },
}));
}
type Props = CollectionEntry<"blog">;
-const post = Astro.props;
+const { post, prevPost, nextPost } = Astro.props;
const { Content, remarkPluginFrontmatter } = await post.render();
---
@@ -40,6 +47,10 @@ const { Content, remarkPluginFrontmatter } = await post.render();
<Content />
</section>
+ <section>
+ <Pagination prevPost={prevPost} nextPost={nextPost} />
+ </section>
+
<section>
<Comments />
</section>
--
cgit v1.2.3